import React, { Component } from 'react'
import {DatePicker} from 'antd'
import locale from 'antd/lib/date-picker/locale/zh_CN'
import moment from 'moment'
import zh from 'moment/locale/zh-cn'
import PropTypes from 'prop-types'
moment.locale('zh')

class DatePickerCustom extends Component {
  constructor() {
    super()
    this.state = {
      startDate: moment().subtract(182, 'days'),
      endDate: moment(),
      endOpen: false,
    }
  }
  disabledStartDate = (startDate) => {
    const { endDate } = this.state
    if (!startDate || !endDate) {
      return false
    }
    return moment().valueOf() <= startDate.valueOf()
  }
  disabledEndDate = (endDate) => {
    const { startDate } = this.state
    if (!endDate || !startDate) {
      return false
    }
    //moment().subtract(1, 'days').valueOf() <= endDate.valueOf()
    return moment(startDate.valueOf()).add(364, 'days').valueOf() <= endDate.valueOf()
      || startDate.valueOf() >= endDate.valueOf()
      || moment().valueOf() <= endDate.valueOf()
  }
  onStartChange = (value) => {
    if (!value) {
      return
    }
    this.setState({
      startDate: value,
      dateChangeEnd: false
    })
  }
  onEndChange = (value) => {
    if (!value) {
      return
    }
    this.setState({
      endDate: value,
      dateChangeEnd: true
    })
    this.props.getDate(this.state.startDate, value)
  }
  handleStartOpenChange = (open) => {
    if (!open) {
      this.setState({ endOpen: true })
    }
  }

  handleEndOpenChange = (open) => {
    this.setState({ endOpen: open })
  }
  render() {
    const { startDate, endDate, endOpen } = this.state
    return <div>
      <DatePicker
        disabledDate={this.disabledStartDate}
        format="YYYY/MM/DD"
        value={startDate}
        placeholder="开始日期"
        onChange={this.onStartChange}
        onOpenChange={this.handleStartOpenChange}
        locale={locale}
      />
      <DatePicker
        locale={locale}
        disabledDate={this.disabledEndDate}
        format="YYYY/MM/DD"
        value={endDate}
        placeholder="结束日期"
        onChange={this.onEndChange}
        open={endOpen}
        onOpenChange={this.handleEndOpenChange}
      />
    </div>
  }
}
DatePickerCustom.propTypes = {
  getDate: PropTypes.func
}
export default DatePickerCustom